<template>
  <a-form
    ref="formRef"
    inline
    :model="formData"
    :rules="rules"
    v-bind="formItemLayout"
  >
    <a-form-item label="算法类别" name="categoryName" required>
      <a-select
        v-model:value="formData.categoryName"
        allow-clear
        placeholder="请选择算法类别"
        :options="selectList"
      />
    </a-form-item>
    <a-form-item label="API地址" name="apiAddress" required>
      <a-input
        v-model:value="formData.apiAddress"
        placeholder="请输入API地址"
        maxLength="100"
      />
    </a-form-item>
    <a-form-item label="API认证信息" name="apiToken">
      <a-input
        v-model:value="formData.apiToken"
        placeholder="请输入API认证信息"
        maxLength="200"
      />
    </a-form-item>
    <a-form-item label="解析文件" name="json" required>
      <UploadJson ref="uploadRef" :data="formData" />
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { watchEffect, ref, reactive } from 'vue'
import type { Rule } from 'ant-design-vue/es/form'
// import UploadJson from '@/components/YuanQi-UploadJson.vue'
import UploadJson from './UploadJson.vue'
import { validateUrl } from '@/utils/validate'

const formRef = ref()
const formData = reactive({
  id: '',
  categoryName: undefined,
  apiAddress: '',
  apiToken: '',
  jsonName: '',
  algCategoryInstanceVoList: []
})

const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 24 }
}

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  selectList: {
    type: Array,
    default: () => []
  },
  modalType: {
    type: String,
    default: 'add'
  }
})

const uploadRef = ref()

const validateJson = async (_rule: Rule, value: string) => {
  const list = uploadRef.value.fileList
  if (props.modalType === 'edit') {
    if (!list[0]?.name) {
      if (!props.data.jsonName) {
        return Promise.reject(new Error('请上传'))
      }
    } else {
      formData.jsonName = list[0].name
      formData.algCategoryInstanceVoList = uploadRef.value.algVoList
    }
    return Promise.resolve()
  }
  if (!list?.length) {
    return Promise.reject(new Error('请上传'))
  } else {
    formData.jsonName = list[0].name
    formData.algCategoryInstanceVoList = uploadRef.value.algVoList
    return Promise.resolve()
  }
}

const rules: Record<string, Rule[]> = {
  apiAddress: [
    {
      validator: validateUrl,
      trigger: 'change'
    },
    {
      min: 1,
      max: 100,
      message: '长度不能大于100',
      trigger: 'change'
    }
  ],
  json: [{ required: true, validator: validateJson, trigger: 'change' }]
}

watchEffect(() => {
  if (props.modalType === 'edit') {
    console.log(props.data, 'edit')
    formData.id = props.data.id
    formData.algCategoryInstanceVoList = props.data.algCategoryInstanceVoList

    formData.categoryName = props.data.categoryName
    formData.apiAddress = props.data.apiAddress
    formData.apiToken = props.data.apiToken
    formData.jsonName = props.data.jsonName
  }
})

defineExpose({
  formData,
  formRef
})
</script>
